import React, { useRef } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { useEffect } from 'react'
export default function Input({ extra, onExtraClick, className, ...rest }) {
  const inputRef = useRef(null)
  useEffect(() => {
    document
      .getElementById('topNode')
      .parentNode.parentNode.parentNode.addEventListener(
        'transitionend',
        function () {
          if (inputRef && inputRef.current) {
            inputRef.current.focus()
          }
        }
      )
  }, [])
  return (
    <div className={styles.root} id="topNode">
      <input
        ref={inputRef}
        {...rest}
        type="text"
        className={classNames('input', className)}
      />
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  )
}
